<template>
  <van-form @submit.native.prevent="handleSubmit" class="simple-login-form">
    <van-field
      v-model="username"
      name="username"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
      class="input-field"
    />
    <van-field
      v-model="password"
      type="password"
      name="password"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
      class="input-field"
    />
    <van-button round block type="primary" @click="startWeChatAuth">
      微信登录
    </van-button>
    <!-- 添加错误信息显示 -->
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
  </van-form>
</template>

<script>
import { Form, Field } from "vant";

export default {
  components: {
    [Form.name]: Form, // 使用组件的 name 属性进行注册，避免潜在冲突
    [Field.name]: Field,
  },
  data() {
    return {
      username: "",
      password: "",
      errorMessage: "", // 用于显示错误信息的变量
      weChatAuthResult: "", // 用于存储微信授权的结果
    };
  },
  methods: {
    async startWeChatAuth() {
      window.location.href =
        "https://hyth-express-127596-8-1331327326.sh.run.tcloudbase.com/api/auth/wechat-auth";
    },
  },
  name: "LoginForm",
};
</script>

<style scoped>
.simple-login-form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.input-field {
  margin-bottom: 16px;
}

.van-button {
  margin-top: 24px;
}

/* 添加错误信息的样式 */
.error-message {
  color: red; /* 红色表示错误信息 */
  margin-top: 16px; /* 与按钮保持一定间距 */
}
</style>
